import { defineComponent, onMounted, reactive, ref, toRefs, unref } from 'vue'
import { Card, Button, Table, Space, Row, Col, FormItem, Select, DatePicker, Input } from 'ant-design-vue'
import { useDetail } from './use-detail'
import { useColumns } from './use-columns'
import { BusinessPageTypeEnum } from '@/enums/pageTypeEnum'
import { actualStatusObj, groupTypeObj } from '@/views/stock/current-stock/data'

const SaleReturnOrder = defineComponent({
  name: 'CurrentStock',
  setup() {
    const tableLoading = ref<boolean>(false)
    const tableData = ref<any[]>([])
    const pageType = ref<BusinessPageTypeEnum>(BusinessPageTypeEnum.TABLE)

    const tableQuery = reactive({
      productStartTime: null,
      productEndTime: null,
      actualLocationCode: null,
      actualStatus: null,
      groupType: null
    })
    const { status, getDataList } = useDetail()

    const updateData = (code: string) => {
      pageType.value = BusinessPageTypeEnum.UPDATE
      selectData.code = code
    }

    const detailData = (code: string) => {
      pageType.value = BusinessPageTypeEnum.DETAIL
      selectData.code = code
    }

    const { getColumns, tableColumns } = useColumns(updateData, detailData)

    const onSearch = async () => {
      tableQuery.pageNum = 1
      tableQuery.pageSize = 10
      await fetchData()
    }

    const handlePageChange = async () => {
      await fetchData()
    }

    async function fetchData() {
      tableLoading.value = true
      try {
        tableData.value = await getDataList(tableQuery)
        tableLoading.value = false
      } catch (error) {
        tableLoading.value = false
      }
    }

    const onReset = async () => {
      tableQuery.pageNum = 1
      tableQuery.pageSize = 10
      tableQuery.productStartTime = null
      tableQuery.productEndTime = null
      tableQuery.actualLocationCode = null
      tableQuery.actualStatus = null
      tableQuery.groupType = null
      await fetchData()
    }

    const addData = () => {
      pageType.value = BusinessPageTypeEnum.ADD
    }

    onMounted(async () => {
      await fetchData()
    })

    return {
      ...toRefs(status),
      tableLoading,
      tableData,
      tableQuery,
      tableColumns,
      pageType,
      onSearch,
      onReset,
      handlePageChange,
      getColumns,
      addData
    }
  },

  render() {
    const {
      tableColumns,
      tableLoading,
      tableData,
      tableQuery,
      pageType,
      onSearch,
      onReset,
      getColumns,
      handlePageChange,
      addData
    } = this
    return (
      <>
        {pageType === BusinessPageTypeEnum.TABLE && (
          <>
            <Card>
              <Row gutter={16} align='middle' type='flex'>
                <Col span={6}>
                  <FormItem label={'产品位置'}>
                    <Input v-model={[tableQuery.actualLocationCode, 'value']}></Input>
                  </FormItem>
                </Col>
                <Col span={6}>
                  <FormItem label={'产品实际状态'}>
                    <Select
                      v-model={[tableQuery.actualStatus, 'value']}
                      options={actualStatusObj}
                      placeholder={'请选择'}
                    ></Select>
                  </FormItem>
                </Col>
                <Col span={6}>
                  <FormItem label={'产品聚合类型'}>
                    <Select
                      v-model={[tableQuery.groupType, 'value']}
                      options={groupTypeObj}
                      placeholder={'请选择'}
                    ></Select>
                  </FormItem>
                </Col>
                <Col span={6}>
                  <FormItem label={'产品生产日期'}>
                    <DatePicker
                      v-model={[tableQuery.productStartTime, 'value']}
                      format={'YYYY-MM-DD'}
                      valueFormat='YYYY-MM-DD'
                      placehoider={'请选择开始日期'}
                    />
                    <span>-</span>
                    <DatePicker
                      v-model={[tableQuery.productEndTime, 'value']}
                      format={'YYYY-MM-DD'}
                      valueFormat='YYYY-MM-DD'
                      placehoider={'请选择结束日期'}
                    />
                  </FormItem>
                </Col>
              </Row>
              <Row>
                {/*<Col span={18}>*/}
                {/*  <Button type={'primary'} onClick={addData} v-auth={['warehouse:sale-return-order:add']}>*/}
                {/*    +新增*/}
                {/*  </Button>*/}
                {/*</Col>*/}
                <Col span={6}>
                  <Space>
                    <Button type={'primary'} onClick={onSearch}>
                      查询
                    </Button>
                    <Button onClick={onReset}>重置</Button>
                  </Space>
                </Col>
              </Row>
            </Card>
            <Card style={{ marginTop: '16px' }}>
              <Table
                rowKey='id'
                columns={tableColumns}
                dataSource={unref(tableData)}
                loading={unref(tableLoading)}
                // pagination={{
                //   current: tableQuery.pageNum,
                //   pageSize: tableQuery.pageSize,
                //   total: unref(tableTotal.totalCount),
                //   showTotal: () => `Total ${unref(tableTotal.totalCount)} items`,
                //   showSizeChanger: true,
                //   showQuickJumper: true,
                //   onChange: handlePageChange,
                //   'onUpdate:current': current => (tableQuery.pageNum = current),
                //   'onUpdate:pageSize': pageSize => (tableQuery.pageSize = pageSize)
                // }}
              >
                {{
                  bodyCell: ({ column, record }) => getColumns(column, record)
                }}
              </Table>
            </Card>
          </>
        )}
      </>
    )
  }
})
export default SaleReturnOrder
